<script lang="ts" setup generic="T extends BaseEntity">
import { useElementSize } from '@vueuse/core';
import HqRow from '../col/HqRow.vue';
import type { BaseEntity, DialogModel, User } from '@/index.d';
import { exportToExcel } from '@/index';
type OperationButton = 'search' | 'resetSearch' | 'insert' | 'import' | 'export' | null;

const props = defineProps({
  total: { type: Number, default: 0 },

  // 表格控制的对象标题
  title: {
    type: String,
    required: true
  },

  //当在数据处理过程中，控制按钮的禁用状态
  loading: {
    type: Boolean,
    required: true
  },

  // 数据操作的基础路径，表格中的查看，更新和操作按钮可以直接调用，无需将操作动作提交给父组件执行
  baseUrl: {
    type: String,
    required: true
  },

  //控制是否显示分页器
  pagination: {
    type: Boolean,
    default: true
  },

  // 用于控制操作按钮的显示
  operationButtons: {
    type: Array<OperationButton>,
    default: () => ['search', 'resetSearch', 'insert', 'import', 'export']
  },

  //固定表头时，表格的高度
  height: Number,
  //表格的数据
  tableData: Array,

  //当表格可多选时，选中的行
  rowSelected: Array<T>,

  //表格是否可多选
  selection: { type: Boolean, default: false },

  //表格是否显示逻辑删除列
  logicDelete: { type: Boolean, default: false },

  //表格是否显示id列
  id: { type: Boolean, default: false },

  //表格是否显示版本列
  version: { type: Boolean, default: false },

  //表格是否显示编制人、编制日期、最后修改人、最后修改日期
  operateRecord: { type: Boolean, default: false },

  //表格是否显示查看、编辑和物理删除列
  operateColumn: { type: Boolean, default: false }
});

const emit = defineEmits<{
  (e: 'handleQuery'): void;
  (e: 'handleResetQuery'): void;
  (e: 'handleImport'): void;
  (e: 'handleReload'): void;
  (e: 'handleRowClick', row: any): void;
}>();

const pageSize = defineModel<number>('pageSize');

const currentPage = defineModel<number>('currentPage');

const detailDialogModel = defineModel<DialogModel<object>>('detailDialogModel');

const handleOpenInsert = () => {
  if (detailDialogModel.value) {
    detailDialogModel.value.type = 'insert';
    detailDialogModel.value.visible = true;
    detailDialogModel.value.id = 0;
  }
};

const handleOpenUpdate = (user: User) => {
  if (detailDialogModel.value) {
    detailDialogModel.value.type = 'update';
    detailDialogModel.value.id = user.id as number;
    detailDialogModel.value.visible = true;
  }
};

const handleOpenView = (user: User) => {
  if (detailDialogModel.value) {
    detailDialogModel.value.type = 'view';
    detailDialogModel.value.id = user.id as number;
    detailDialogModel.value.visible = true;
  }
};

// 是否展示按钮区的判断条件
const isButtonShow = (name: OperationButton) => props.operationButtons.includes(name);

watch(
  () => [pageSize.value, currentPage.value],
  () => emit('handleQuery')
);

const handleExport = () => exportToExcel(props.baseUrl);

const handleRowClick = (row: T) => emit('handleRowClick', row);

const containerRef = ref(null);
const { height: containerHeight } = useElementSize(containerRef);
const containerHeightToPx = computed<string>(() => containerHeight.value - 2 + 'px');
const tableRef = ref(null);
const { height } = useElementSize(tableRef);
const handleReload = () => emit('handleReload');
</script>
<template>
  <div ref="containerRef" style="width: 100%; height: 100%">
    <div class="hq-container-table-wraper">
      <!-- 搜索区 -->
      <div class="hq-container-table-search">
        <HqRow class="search"><slot name="search"></slot> </HqRow>
      </div>
      <!-- 搜索区 -->

      <!-- 按钮区 -->
      <div class="hq-container-table-button" v-if="!isButtonShow(null)">
        <!-- 查询按钮 -->
        <el-button
          icon="Search"
          color="#626aef"
          v-if="isButtonShow('search')"
          @click="$emit('handleQuery')"
          :disabled="loading"
        >
          <!-- v-button="`查询${title}`" -->
          查询{{ title }}
        </el-button>
        <!-- 查询按钮 -->

        <!-- 重置查询按钮 -->
        <el-button
          icon="Search"
          color="#5aa19c"
          v-if="isButtonShow('resetSearch')"
          @click="$emit('handleResetQuery')"
          :disabled="loading"
        >
          <!-- v-button="`重置查询${title}`" -->
          重置查询
        </el-button>
        <!-- 重置查询按钮 -->

        <!-- 新增按钮 -->
        <el-button
          icon="Plus"
          type="success"
          v-if="isButtonShow('insert')"
          @click="handleOpenInsert"
          :disabled="loading"
          v-button="`新增${title}`"
        >
          新增{{ title }}
        </el-button>
        <!-- 新增按钮 -->

        <!-- 导入按钮 -->
        <el-button
          icon="Upload"
          type="primary"
          v-if="isButtonShow('import')"
          :disabled="loading"
          v-button="`导入${title}`"
          @click="$emit('handleImport')"
        >
          导入{{ title }}
        </el-button>
        <!-- 导入按钮 -->

        <!-- 导出按钮 -->
        <el-button
          icon="Download"
          type="info"
          v-if="isButtonShow('export')"
          :disabled="loading"
          @click="handleExport"
          v-button="`导出${title}`"
        >
          导出{{ title }}
        </el-button>
        <!-- 导出按钮 -->

        <!-- 自定义按钮 -->
        <slot name="button"></slot>
        <!-- 自定义按钮 -->
      </div>
      <!-- 按钮区 -->

      <!-- 表格区 -->
      <div class="hq-container-table-table" ref="tableRef">
        <slot name="table" :height>
          <hq-table
            :height
            :table-data
            :row-selected
            :selection
            :title
            :baseUrl
            :loading
            :logic-delete
            :id
            :version
            :operate-record
            :operate-column
            v-bind="$attrs"
            @handle-view="handleOpenView"
            @handle-update="handleOpenUpdate"
            @handle-reload="handleReload"
            @handle-row-click="handleRowClick"
          >
            <template #columns> <slot name="tableColumns"></slot></template>
          </hq-table>
        </slot>
      </div>
      <!-- 表格区 -->
      <!-- 分页区 -->
      <div class="hq-container-table-pagination" v-if="props.pagination">
        <slot name="pagination">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total
            :page-sizes="[20, 40, 50, 100, 200]"
            v-model:page-size="pageSize"
            v-model:current-page="currentPage"
          />
        </slot>
      </div>
      <!-- 分页区 -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
// height: calc(100vh - 120px);
.hq-container-table-wraper {
  height: v-bind('containerHeightToPx');
  display: flex;
  flex-direction: column;

  .hq-container-table-search {
    padding: 0 4px;
    .search {
      margin: 2px 0;
      :deep(> .el-col) {
        > * {
          margin: 2px 0;
        }
      }
    }
  }

  .hq-container-table-button {
    height: 40px;
    line-height: 40px;
    display: flex;
    & > * {
      margin: 4px;
    }
  }

  .hq-container-table-table {
    flex: 1;
    padding: 5px;
  }

  .hq-container-table-pagination {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
  }
}
</style>
